<template>
  <div>    
      <cpuchart :id="'cpu'" :name="'CPU'" :title = "$t('realTime.picLabel1')" :unit="'%'" :picData="cpu" :show='show'></cpuchart>
      <chart :id="'memory'" :name="$t('realTime.tooltip2')" :title = "$t('realTime.picLabel2')" :unit="'%'" :picData="memory" :show='show'></chart>
      <chart :id="'node'" :name="$t('realTime.tooltip3')" :title = "$t('realTime.picLabel3')" :unit="$t('realTime.aunit')" :picData="node" :show='show'></chart>
      <diskinfo  :title = "$t('realTime.picLabel4')" :disk="disk" :show='show'></diskinfo>
  </div>
</template>
<script>

import chart from './slots/chart.vue'
import cpuchart from './slots/cpuchart.vue'
import diskinfo from './slots/diskinfo.vue'
import realTimeService from 'services/realTimeService'
export default {
  data() {
    return {
      cpu:[],
      node: [],
      memory: [],
      disk: {
        total: 0,
        used: 0
      },
      intervalid: null,
      show:false,
      clearTimeout:false
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      realTimeService.getEquipment()
      .then((res) => {
        
        if (res.errcode === 0) {
          this.show=true
          this.node = res['8']
          this.memory = res['6']
          this.cpu = res['5']
          this.disk = res['3']
        }
				if (this.clearTimeout) {
        	return 
        }
				clearTimeout(this.intervalid)
        this.intervalid = setTimeout(() => this.loadData(), 10000)
      },()=>{
      	if (this.clearTimeout) {
			    return 
			  }
      	clearTimeout(this.intervalid)
				this.intervalid = setTimeout(() => this.loadData(), 10000)
			})
    }
  },
  components:{
    chart,
    diskinfo,
    cpuchart
  },
  beforeDestroy() {
  	this.clearTimeout = true
		clearTimeout(this.intervalid)
  }
}
</script>